<template>
<div id="app" class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
	<div class="row">
		<div class="ibox float-e-margins">
			<div class="ibox-content col-md-12">
				<form id="waterFunctionInfoForm" method="post" class="form m-t"  @submit.prevent="save()" accept-charset="UTF-8" >
					<input type="hidden" name="id" v-model="item.id" />
					<input type="hidden" name="token" v-model="item.token" />
					<input type="hidden" name="newFlag" v-model="newFlag" />
					<div class="clearfix "></div>
					<div class="col-md-6 b-r">

                        <div class="form-group clearfix">
                            <label class="col-md-8 control-label">水功能区编号：</label>
                            <div class="col-md-12">
                                <input id="bean-waterFuncAreaCode" name="waterFuncAreaCode" v-model="item.waterFuncAreaCode" class="form-control" type="text"  placeholder="请输入水功能区编号"  required="" aria-required="true"  aria-describedby="bean-waterFuncAreaCode-error"  maxlength="50"   aria-invalid="true">
                                <span id="bean-waterFuncAreaCode-error" class="help-block m-b-none" for="bean-waterFuncAreaCode"></span>
                            </div>
                        </div>

                        <div class="form-group clearfix">
                            <label class="col-md-8 control-label">所在河道：</label>
                            <div class="col-md-12">
                                <!--<select data-placeholder="选择所在河道" id="bean-riverCourseCode" name="riverCourseCode" class="form-control"   aria-describedby="bean-riverCourseCode-error"  maxlength="50"   aria-invalid="true">-->
                                    <!--<option value="">&#45;&#45;请选择所在河道&#45;&#45;</option>-->
                                    <!--<option :value="item.riverCourseCode" :selected="item.riverCourseCode === area.id" v-for="area in areaArray">{{area.name}}</option>-->
                                <!--</select>-->
                              <riverSelect :selected-code="item.riverCourseCode"/>
                                <span id="bean-riverCourseCode-error" class="help-block m-b-none" for="bean-riverCourseCode"></span>
                            </div>
                        </div>

                        <div class="form-group clearfix">
                            <label class="col-md-8 control-label">起点经度：<a href="javascript:;" @click="getCoordinate('start')" class="label label-success"><i class="fa fa-coordinate"></i>坐标拾取</a></label>
                            <div class="col-md-12">
                                <input id="bean-startLon" name="startLon" v-model="item.startLon" class="form-control" type="number"  placeholder="请输入起点经度"  aria-describedby="bean-startLon-error"   aria-invalid="true">
                                <span id="bean-startLon-error" class="help-block m-b-none" for="bean-startLon"></span>
                            </div>
                        </div>

                        <div class="form-group clearfix">
                            <label class="col-md-8 control-label">起点纬度：</label>
                            <div class="col-md-12">
                                <input id="bean-startLat" name="startLat" v-model="item.startLat" class="form-control" type="number"  placeholder="请输入起点纬度"  aria-describedby="bean-startLat-error"   aria-invalid="true">
                                <span id="bean-startLat-error" class="help-block m-b-none" for="bean-startLat"></span>
                            </div>
                        </div>

                        <div class="form-group clearfix">
                            <label class="col-md-8 control-label">终点经度：<a href="javascript:;" @click="getCoordinate('end')" class="label label-success"><i class="fa fa-coordinate"></i>坐标拾取</a></label>
                            <div class="col-md-12">
                                <input id="bean-endLon" name="endLon" v-model="item.endLon" class="form-control" type="number"  placeholder="请输入终点经度"  aria-describedby="bean-endLon-error"   aria-invalid="true">
                                <span id="bean-endLon-error" class="help-block m-b-none" for="bean-endLon"></span>
                            </div>
                        </div>

                        <div class="form-group clearfix">
                            <label class="col-md-8 control-label">终点纬度：</label>
                            <div class="col-md-12">
                                <input id="bean-endLat" name="endLat" v-model="item.endLat" class="form-control" type="number"  placeholder="请输入终点纬度"  aria-describedby="bean-endLat-error"   aria-invalid="true">
                                <span id="bean-endLat-error" class="help-block m-b-none" for="bean-endLat"></span>
                            </div>
                        </div>

                        <div class="form-group clearfix">
                            <label class="col-md-8 control-label">责任单位：</label>
                            <div class="col-md-12">
                                <input id="bean-responsibleDept" name="responsibleDept" v-model="item.responsibleDept" class="form-control" type="text"  placeholder="请输入责任单位"  aria-describedby="bean-responsibleDept-error"  maxlength="50"   aria-invalid="true">
                                <span id="bean-responsibleDept-error" class="help-block m-b-none" for="bean-responsibleDept"></span>
                            </div>
                        </div>

					</div>
					<div class="col-md-6">

                        <div class="form-group clearfix">
                            <label class="col-md-8 control-label">联系电话：</label>
                            <div class="col-md-12">
                                <input id="bean-phoneNumber" name="phoneNumber" v-model="item.phoneNumber" class="form-control" type="text"  placeholder="请输入联系电话"  aria-describedby="bean-phoneNumber-error"  maxlength="50"   aria-invalid="true">
                                <span id="bean-phoneNumber-error" class="help-block m-b-none" for="bean-phoneNumber"></span>
                            </div>
                        </div>

                        <div class="form-group clearfix">
                            <label class="col-md-8 control-label">行政区划：</label>
                            <!--<div class="col-md-12">-->
                                <!--<input id="bean-regionId" name="regionId" v-model="item.regionId" class="form-control" type="text"  placeholder="请输入行政区划"  aria-describedby="bean-regionId-error"  maxlength="50"   aria-invalid="true">-->
                              <region-select :region-ids="item.regionId"/>
                              <!--<span id="bean-regionId-error" class="help-block m-b-none" for="bean-regionId"></span>-->
                            <!--</div>-->
                        </div>

                        <div class="form-group clearfix">
                            <label class="col-md-8 control-label">归口管理单位：</label>
                            <div class="col-md-12">
                                <input id="bean-gkManagementDept" name="gkManagementDept" v-model="item.gkManagementDept" class="form-control" type="text"  placeholder="请输入归口管理单位"  aria-describedby="bean-gkManagementDept-error"  maxlength="50"   aria-invalid="true">
                                <span id="bean-gkManagementDept-error" class="help-block m-b-none" for="bean-gkManagementDept"></span>
                            </div>
                        </div>

                        <div class="form-group clearfix">
                            <label class="col-md-8 control-label">标准等级：</label>
                            <div class="col-md-12">
                                <input id="bean-standardLevel" name="standardLevel" v-model="item.standardLevel" class="form-control" type="text"  placeholder="请输入标准等级"  aria-describedby="bean-standardLevel-error"  maxlength="50"   aria-invalid="true">
                                <span id="bean-standardLevel-error" class="help-block m-b-none" for="bean-standardLevel"></span>
                            </div>
                        </div>

                        <div class="form-group clearfix">
                            <label class="col-md-8 control-label">备注：</label>
                            <div class="col-md-12">
                                <input id="bean-memo" name="memo" v-model="item.memo" class="form-control" type="text"  placeholder="请输入备注"  aria-describedby="bean-memo-error"  maxlength="255"   aria-invalid="true">
                                <span id="bean-memo-error" class="help-block m-b-none" for="bean-memo"></span>
                            </div>
                        </div>

					</div>

                  <div class="clearfix "></div>
                  <div class="col-12 text-center" style="height: 50px;">
                    <div>
                      <input class="btn btn-primary" type="submit" value="保存"/> | <a @click="lbox.closeMyBoxLayer()" class="btn btn-danger" href="javascript:">返回</a>
                    </div>
                  </div>
                </form>
			</div>
		</div>
	</div>
</div>
</template>
<script type="text/javascript">
  import '@/assets/css/style.css'

  import $ from '@/assets/js/jquery-vendor.js'
  import 'jquery.cookie'
  import axios from 'axios'
  import '@/assets/js/validate/validation-vendor.js'

  import {apiUtil, axiosContentType, site, $storage} from '@/assets/js/boss'
  import riverSelect from './riverSelect'
  import regionSelect from './regionSelect'

  export default {
        data() {
          return {
            item: {},
            newFlag: 0,
            uuidToken: ''
          }
        },
        components: {
          riverSelect,
          regionSelect
        },
        mounted() {
          let that = window.$vueApp = this;
          document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
          $('#waterFunctionInfoForm').validate();
          that.staff.init(function () {
            that.newFlag = sessionStorage.getItem(site.waterFunctionInfo.info);
              if (that.newFlag) that.uuidToken = apiUtil.guid();
              if (apiUtil.existSessionKey(site.waterFunctionInfo.info)) {
                that.info();
              }
          });
        },
        methods: {
            info() {
              let that = window.$vueApp = this;
                axios.get(site.waterFunctionInfo.info + sessionStorage.getItem(site.waterFunctionInfo.info), {}).then(function (response) {
                     const result = response.data;
                    if (result.code === 0) {
                        that.item = result.data;
                    } else {
                        alert(result.message);
                    }
                });
            },
            save() {
              let that = window.$vueApp = this;
                if ($('#waterFunctionInfoForm').valid()) {
                     axios.post(site.waterFunctionInfo.save, $('#waterFunctionInfoForm').serialize(),
                     axiosContentType.xWwwFormUrlencoded).then(function (response) {
                        const result = response.data;
                        // console.info("获取数据.." + JSON.stringify(result));
                        if (result.code === 0) {
                            parent.$vueApp.page();
                            alert('保存成功!');
                            that.lbox.closeMyBoxLayer()
                        } else {
                            alert(result.message);
                        }
                    });
                };
            },
          getCoordinate(val) { // 坐标拾取页面
              let that = window.$vueApp = this;
            $storage.setItem('inputKey', val);
            that.lbox.openMyBoxLayer('经纬度坐标拾取', site.map.mapll);
          },
          setMapSite(longitude, latitude, address) { // 坐标拾取回调
            let that = window.$vueApp = this;
            let inputKey = $storage.getItem('inputKey');
            if (inputKey === 'start') {
              $('#bean-startLon').val(longitude);
              $('#bean-startLat').val(latitude);
              that.item.startLon = longitude;
              that.item.startLat = latitude;
            } else if (inputKey === 'end') {
              $('#bean-endLon').val(longitude);
              $('#bean-endLat').val(latitude);
              that.item.endLon = longitude;
              that.item.endLat = latitude;
            }
            $storage.removeItem('inputKey');
          }
        }
    }
</script>

